<template>
  <div>
    <div class="cantainer">
      <div class="baseImg"></div>
      <div class="title">
        <!-- <div class="text">
          <img src="@/assets/image3.png" alt="" srcset="" />
          <img src="@/assets/image5.png" alt="" />
          <img src="@/assets/image6.png" alt="" />
        </div> -->
        <div class="time">
          <div class="timeContent">
            <div>{{ timeData.hours.charAt(0) }}</div>
            <div>{{ timeData.hours.charAt(1) }}</div>
          </div>
          <div class="punctuation">:</div>
          <div class="timeContent">
            <div>{{ timeData.minutes.charAt(0) }}</div>
            <div>{{ timeData.minutes.charAt(1) }}</div>
          </div>
          <div class="punctuation">:</div>
          <div class="timeContent">
            <div>{{ timeData.seconds.charAt(0) }}</div>
            <div>{{ timeData.seconds.charAt(1) }}</div>
          </div>
        </div>
        <div class="tiemText">
          本轮抢购时间为：<span style="color: #ff3535">{{
            this.beginDate
          }}</span>
          - {{ this.endDate }}
        </div>
        <img src="@/assets/button1.png" alt="" @click="getConfigInfo()" />
      </div>
      <!-- <div class="center" style="left: 3%">
        <img src="@/assets/image1.png" @click="routerFn(1)" alt="" srcset="" />
      </div> -->
      <div class="center">
        <img src="@/assets/image2.png" @click="routerFn(0)" alt="" srcset="" />
      </div>
    </div>
  </div>
</template>

<script>
import { getConfig, getUserInfo } from "../../api/api";
export default {
  name: "index",
  data() {
    return {
      active: 0,
      timeData: {},
      beginDate: "",
      endDate: "",
      newUserNum: 0,
      isNew: 0,
      useNum: 0,
    };
  },
  methods: {
    routerFn(type) {

       if (this.newUserNum < this.useNum && type == 1)
        return this.$dialog
          .alert({
            message: "您的体验资格已耗尽",
            theme: "round-button",
          })
          .then(() => {
            // on close
          });

      switch (type) {
        case 0:
          this.$router.push(`/index/experience/${type}`);
          break;

        case 1:
          this.$dialog
            .alert({
              message: `您还可体验${this.newUserNum - this.useNum}次`,
              theme: "round-button",
            })
            .then(() => {
              this.$router.push(`/index/experience/${type}`);
            });
          break;

        default:
          break;
      }
    },
    getDate() {
      let date = new Date();
      let hours =
        date.getHours().toString().length == 1
          ? `0${date.getHours().toString()}`
          : date.getHours().toString();
      let minutes =
        date.getMinutes().toString().length == 1
          ? `0${date.getMinutes().toString()}`
          : date.getMinutes().toString();
      let seconds =
        date.getSeconds().toString().length == 1
          ? `0${date.getSeconds().toString()}`
          : date.getSeconds().toString();
      let getDate = {
        hours,
        minutes,
        seconds,
      };
      this.timeData = getDate;
    },
    getConfigInfo() {
      getConfig().then((res) => {
        this.$toast.clear();
        this.beginDate = res.data[0].begin_date;
        this.endDate = res.data[0].end_date;
        this.newUserNum = res.data[0].new_user_usenum;

        localStorage.setItem("beginDate", res.data[0].begin_date_int);
        localStorage.setItem("endDate", res.data[0].end_date_int);
        localStorage.setItem("config", JSON.stringify(res.data[0]));
        console.log("公共-获取配置信息接口", res.data[0]);
      });
    },
    getMoney() {
      let data = {
        user_id: localStorage.getItem("userId"),
      };
      getUserInfo(data).then((res) => {
        this.money = res.data.money;
        this.isNew = res.data.is_new;
        this.useNum = res.data.use_num;
        console.log("获取用户信息接口---", res.data);
      });
    },
  },
  mounted() {
    setInterval(() => {
      this.getDate();
    }, 1000);
    this.getMoney();
  },
  created() {
    this.getDate();
    this.getConfigInfo();
  },
};
</script>

<style lang="less" scoped>
div {
  box-sizing: border-box !important;
}
.cantainer {
  width: 100%;
  overflow: hidden;
  .baseImg {
    width: 100%;
    height: 180px;
    background-color: #EFBF15;
    border-bottom-left-radius: 40%;
    border-bottom-right-radius: 40%;
  }
  .title {
    width: 94%;
    height: 50%;
    max-height: 250px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    top: 6%;
    left: 3%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    box-shadow: 0px 5px 10px #bfc1c4;

    // .text {
    //   img:nth-child(1) {
    //     width: 25%;
    //     position: absolute;
    //     top: -8%;
    //     left: 5%;
    //   }
    //   img:nth-child(2) {
    //     width: 80%;
    //     position: absolute;
    //     top: 8%;
    //     left: 15%;
    //   }
    //   img:nth-child(3) {
    //     width: 8%;
    //     position: absolute;
    //     top: 4%;
    //     left: 17%;
    //   }
    // }

    .time {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .timeContent {
        width: 27%;
        height: 100%;
        color: #fff;
        font-size: 3.5em;
        display: flex;
        justify-content: space-between;
        align-items: center;

        div {
          width: 48%;
          height: 80px;
          background-color: #000;
          border-radius: 5px;
          text-align: center;
          line-height: 80px;
        }
      }

      .punctuation {
        font-size: 4em;
        margin: 0 -5px;
      }
    }

    .tiemText {
      font-size: 1em;
      font-weight: 700;
      color: #333333;
      letter-spacing: 1px;
    }

    & > img {
      //   width: 50%;
      height: 40px;
    }
  }
  .center {
    width: 94%;
    // max-width: 168px;
    height: 45%;
    max-height: 168px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    top: calc(6% + 270px);
    left: 3%;
    box-shadow: 0px 5px 10px #bfc1c4;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      height: 85%;
    }
  }
}
.tabbar {
  border-top: 1px solid #3ace8a;
}
</style>